<template>
  <div id="app" :style="{appStyle}">
    <router-view/>
    <!-- 预加载 -->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      appStyle: {}
    }
  },
  methods: {
    getScale () {
      const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      const d = window.document.createElement('div')
      d.style.width = '1rem'
      d.style.display = 'none'
      const head = window.document.getElementsByTagName('head')[0]
      head.appendChild(d)
      const width = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'))
      return windowWidth / 10 / width
    }
  },
  mounted () {
    // 适配宽屏
    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    const app = document.getElementById('app')
    let realWidth = windowWidth
    if (windowHeight / windowWidth <= 1200 / 750) {
      realWidth = 750 / 1200 * windowHeight
      app.style.width = realWidth + 'px'
      app.style.marginLeft = (windowWidth - realWidth) / 2 + 'px'
    }
    document.documentElement.style.fontSize = this.getScale() * 10 * realWidth / windowWidth + 'vw'
  }
}
</script>

<style lang="scss">

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
